<template>
    <div :ref="$options.name" class="chartInstance" />
</template>
<script>
    import chartmixins from '../../util/echartmixins'
    export default {
        name: 'Pie-card',
        components: {},
        mixins: [chartmixins],
        props: {
            // 百分比占比
            chartData: {
                type: Number,
                default: 63
            },

            // 数值
            chartValue: {
                type: Number,
                default: 153
            },

            // 浮动情况 null 不显示  0 没变更，1 上升了  2 下降了
            dataFloat: {
                type: [Number, null],
                default: 5
            },

            // 单位
            dataTrip: {
                type: String,
                default: '个'
            },

            // 文字
            chartText: {
                type: String,
                default: '在线统计'
            },

            chartStyle: {
                type: Object,
                default: () => {
                    return {
                        // 加载完得颜色
                        'activeColor': 'rgba(255,121,64, 1)',
                        // 没加载得颜色
                        'disAcvtiveColor': 'rgba(255,121,64, 0.3)',
                        // 字体颜色
                        'labelColor': '#e5e5e5',
                        // 上升箭头
                        'rise': 'rgb(231,64,51)',
                        // 下降箭头
                        'descend': 'rgb(40,154,70)',
                        // 没有变化
                        'unbiased': '#666666'
                    }
                }
            }
        },
        data() {
            return {
                defaultOptions: {
                    series: {
                        name: "第一个圆环",
                        type: "pie",
                        clockWise: false,
                        radius: ['55%', '65%'],
                        itemStyle: {
                            normal: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                }
                            }
                        },
                        hoverAnimation: false,
                        center: ["50%", "50%"],
                        data: [
                            {
                                value: 0,
                                name: "first",
                                label: {
                                    rich: {
                                        a: {
                                            color: this.chartStyle.activeColor,
                                            align: "center",
                                            fontSize: this.formatFontSize(16),
                                            fontWeight: "bold",
                                        },
                                        b: {
                                            color: this.chartStyle.labelColor,
                                            align: "center",
                                            fontSize: this.formatFontSize(16),
                                        },
                                        c: {
                                            color: this.chartStyle.rise,
                                            align: "center",
                                            fontSize: this.formatFontSize(16),
                                        },
                                        d: {
                                            color: this.chartStyle.descend,
                                            align: "center",
                                            fontSize: this.formatFontSize(16),
                                        },
                                        e: {
                                            color: this.chartStyle.unbiased,
                                            align: "center",
                                            fontSize: this.formatFontSize(16),
                                        },
                                    },

                                    formatter: () => {
                                        let iconHtml
                                        if(typeof(this.dataFloat) === 'number') {
                                            if(this.dataFloat > 0) {
                                                iconHtml = `\n\n{c|↑ ${ this.dataFloat }}`
                                            } else if(this.dataFloat < 0) {
                                                iconHtml = `\n\n{d|↓ ${ this.dataFloat }}`
                                            } else {
                                                iconHtml = '\n\n{e|-}'
                                            }
                                        } else {
                                            iconHtml = ''
                                        }
                                        return (`{b|${ this.chartText }}\n\n{a|${ this.chartValue }${ this.dataTrip }}${ iconHtml }`)
                                    },
                                    
                                    position: "center",
                                    show: true,
                                    textStyle: {
                                        fontSize: this.formatFontSize(14),
                                        fontWeight: "normal",
                                        color: this.chartStyle.labelColor,
                                    },
                                },

                                itemStyle: {
                                    normal: {
                                        color: this.chartStyle.activeColor,
                                    }
                                },
                            },
                            {
                                value: 0,
                                name: "second",
                                itemStyle: {
                                    normal: {
                                        color: this.chartStyle.disAcvtiveColor,
                                    }
                                }
                            }
                        ]
                    }
                }
            }
        },
        watch: {
            formatData(newVal) {
                this.refreshChartData(newVal)
            }
        },
        computed: {
            formatData() {
                return {
                    chartData: this.chartData,
                    chartValue: this.chartValue,
                    dataFloat: this.dataFloat
                }
            },

            formatOptions() {
                return Object.assign({
                    // 加载完得颜色
                    'activeColor': 'rgba(255,121,64, 1)',
                    // 没加载得颜色
                    'disAcvtiveColor': 'rgba(255,121,64, 0.3)',
                    // 字体颜色
                    'labelColor': '#e5e5e5',
                    // 上升箭头
                    'rise': 'rgb(231,64,51)',
                    // 下降箭头
                    'descend': 'rgb(40,154,70)',
                    // 没有变化
                    'unbiased': '#666666'
                }, this.chartStyle)
            },

            chartStyleOptions() {
                const { activeColor, disAcvtiveColor, labelColor, rise, descend, unbiased } = this.formatOptions
                return {
                    series: {
                        type: "pie",
                        data: [
                            {
                                label: {
                                    rich: {
                                        a: {
                                            color: activeColor,
                                        },
                                        b: {
                                            color: labelColor,
                                        },
                                        c: {
                                            color: rise,
                                        },
                                        d: {
                                            color: descend,
                                        },
                                        e: {
                                            color: unbiased,
                                        },
                                    },
                                    textStyle: {
                                        color: labelColor,
                                    },
                                },

                                itemStyle: {
                                    normal: {
                                        color: activeColor,
                                    },
                                },
                            },
                            {
                                itemStyle: {
                                    normal: {
                                        color: disAcvtiveColor,
                                    }
                                }
                            }
                        ]
                    }
                }
            }

        },
        methods: {
            refreshChartData({ chartData }) {
                this.defaultOptions.series.data[0].value = chartData
                this.defaultOptions.series.data[1].value = (100 - chartData)
                this.setOption(this.defaultOptions, true)
            },

            handleRefreshStyle(options) {
                if(!options || !Object.prototype.toString.call(options)=='[object Object]') return
                this.setOption(options)
            }
        },
        beforeCreate() {

        },
        created() {
            
        },
        beforeMount() {

        },
        mounted() {
            this.handleRefreshStyle(this.chartStyleOptions)
            this.refreshChartData(this.formatData)
        },
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped horizontalvw>
    .chartInstance {
        width: 100%;
        height: 100%;
    }
</style>